<template>
  <view>
    <view class="search-box">
      <uni-search-bar @input="input" radius="18" cancelButton="none" focus="true"></uni-search-bar>
    </view>
    <view class="sugg-box">
      <view class="sugg-msg-item" v-for="(item,i) in searchResult" :key="i" @click="gotoGoodsDetail(item.goods_id)">
        <view class="good-name">{{item.goods_name}}</view>
        <uni-icons type="arrowright"></uni-icons>
      </view>
    </view>
    <view class="history-box" v-if="historyData.length!==0">
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="18" @click="cleanHistory"></uni-icons>
      </view>
      <view class="history-data">
      <!--  <uni-tag :text="item" v-for="(item,i) in historyData" :key="i"></uni-tag> -->
        <view class="history-item" v-for="(item,i) in histories" :key="i" @click="gotoGoodList(item)">
          <text class="history-word">{{item}}</text>
      </view>
    </view>

  </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        //输入防抖时间
        timer: null,
        //搜索词
        keyword: '',
        //搜索建议
        searchResult: [],
        //屏幕宽度
        // screenWidth: 0,
        //搜索历史记录
        historyData: []

      };
    },
    onLoad() {
      //获取屏幕宽
      // const res = uni.getSystemInfoSync()
      // this.screenWidth = res.screenWidth
      if(uni.getStorageSync('historyData')){
        this.historyData = uni.getStorageSync('historyData') 
      }
    },
    methods: {
      //输入框值变化
      input(e) {
        //防抖
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.keyword = e
          this.getSearchResult()
        }, 500)
      },
      //获取查询建议结果
      async getSearchResult() {
        if (this.keyword == '') return this.searchResult = []
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch?query=' + this.keyword)
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.searchResult = res.message
        this.saveHistoryData()
        
      },
      //跳转到商品详情页面
      gotoGoodsDetail(id) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + id
        })
      },
      //将搜索过的数据加入历史记录
      saveHistoryData(){
        //去重
        const set = new Set(this.historyData)
        set.delete(this.keyword)
        set.add(this.keyword)
        this.historyData = Array.from(set)
        //将数据存入本地缓存
        uni.setStorageSync('historyData', this.historyData)
       
      },
      //清除历史记录
      cleanHistory (){
        this.historyData = []
        uni.setStorageSync('historyData','')
      },
      //页面跳转
      gotoGoodList (keyword){
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list?query="+keyword
        })
      }
    },
    computed:{
      //重新计算历史记录，数组翻转
      histories(){
        return [...this.historyData].reverse()
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .sugg-box {
    padding: 0 5px;

    .sugg-msg-item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      padding: 0 13px;
      border: 1px solid #f7f7f7;

      .good-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 10px 0;
      }
    }
  }

  .history-box {
    padding: 0 5px;

    .history-title {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #efefef;
      font-size: 13px;
    }

    .history-data {
      display: flex;
      flex-wrap: wrap;

      // .uni-tag {
      //   margin-right: 25px;
      //   margin-top: 10px;
      // }

      .history-item {
        margin: 5px;
        padding: 5px 10px;
        background-color: #efefef;
        border-radius: 5px;
      }
    }
  }
</style>